﻿<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../Scripts/jquery.min.js"></script>
    <script src="Base64.js"></script>
</head>

<body>

    <input type="file" id="files" name="files" multiple="multiple" />
    <input type="button" id="upload" value="Upload Selected Files" />

    <script type="text/javascript">

        $("#upload").click(function (evt) {

            if (typeof (FileReader) === 'undefined') {
                alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
                return;
            }
            var fileUpload = $("#files").get(0);
            var files = fileUpload.files;
            //console.log("length=" + files.length);
            //for (var i = 0; i < files.length; i++) {
            //    data.append(files[i].name, files[i]);
            //}

            var file = files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                $.ajax({
                    type: "POST",
                    url: "http://localhost:5000/api/UploadFile/Base",
                    dataType: 'json',
                    beforeSend: function (request) {
                        request.setRequestHeader("Content-Type", 'application/json;charset=UTF-8');
                    },
                    data: JSON.stringify({ filename: file.name, Base: reader.result }),
                    success: function (data) {
                        alert(data.result);
                    },
                    error: function (data) {
                        debugger;
                        alert(data);
                    }
                });
            }
        });

    </script>
</body>

</html>